<template>
	<view class="bg">
		<xl-navbar title="Image图片" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式：widthFix，宽度不变，保持宽高比不变</view>
			<xl-image src="/static/imgs/pic.png"></xl-image>
			
			<view class="title">宽高、圆角，实际高度受mode影响</view>
			<xl-image src="/static/imgs/pic.png" width="300" height="300" borderRadius="20"></xl-image>
			
			<view class="title">错误图片</view>
			<xl-image src="/static/imgs/pic1.png" avatar  width="300" height="300"></xl-image>
			
			<view class="title">scaleToFill：宽高完全拉伸至填满 image 元素</view>
			<xl-image src="/static/imgs/pic.png" mode="scaleToFill" width="300" height="300"></xl-image>
			
			<view class="title">aspectFit：保持纵横比缩放，长边能完全显示</view>
			<xl-image src="/static/imgs/pic.png" mode="aspectFit" width="300" height="300"></xl-image>
			
			<view class="title">aspectFill：保持纵横比缩放，短边能完全显</view>
			<xl-image src="/static/imgs/pic.png" mode="aspectFill" width="300" height="300"></xl-image>
			
			<view class="title">heightFix：高度不变，保持原图宽高比</view>
			<xl-image src="/static/imgs/pic.png" mode="heightFix" width="300" height="300"></xl-image>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
</script>

